<template>
  <!-- 代替块 -->
  <div class="replace-div" :class="{ active: isNarrowDown }"></div>
  <div class="sid-div" :class="{ active: isNarrowDown }">
    <div class="home-div" @click="narrowDown" :class="{ active: isNarrowDown }">
      |||
    </div>

    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
    >
      <el-menu-item index="0" @click="goHome">
        <el-icon
          ><svg
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            data-v-ea893728=""
          >
            <path
              fill="currentColor"
              d="M512 512a192 192 0 1 0 0-384 192 192 0 0 0 0 384zm0 64a256 256 0 1 1 0-512 256 256 0 0 1 0 512zm320 320v-96a96 96 0 0 0-96-96H288a96 96 0 0 0-96 96v96a32 32 0 1 1-64 0v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 1 1-64 0z"
            ></path></svg
        ></el-icon>
        <template #title>首页</template>
      </el-menu-item>

      <el-sub-menu index="1">
        <template #title>
          <el-icon
            ><svg
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              data-v-ea893728=""
            >
              <path
                fill="currentColor"
                d="M640 384v64H448a128 128 0 0 0-128 128v128a128 128 0 0 0 128 128h320a128 128 0 0 0 128-128V576a128 128 0 0 0-64-110.848V394.88c74.56 26.368 128 97.472 128 181.056v128a192 192 0 0 1-192 192H448a192 192 0 0 1-192-192V576a192 192 0 0 1 192-192h192z"
              ></path>
              <path
                fill="currentColor"
                d="M384 640v-64h192a128 128 0 0 0 128-128V320a128 128 0 0 0-128-128H256a128 128 0 0 0-128 128v128a128 128 0 0 0 64 110.848v70.272A192.064 192.064 0 0 1 64 448V320a192 192 0 0 1 192-192h320a192 192 0 0 1 192 192v128a192 192 0 0 1-192 192H384z"
              ></path></svg
          ></el-icon>
          <span>用户管理</span>
        </template>
        <el-menu-item index="1-1" @click="goUserList">
          <el-icon><icon-menu /></el-icon>
          用户列表
        </el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="2">
        <template #title>
          <el-icon
            ><svg
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              data-v-ea893728=""
            >
              <path
                fill="currentColor"
                d="M317.056 128 128 344.064V896h768V344.064L706.944 128H317.056zm-14.528-64h418.944a32 32 0 0 1 24.064 10.88l206.528 236.096A32 32 0 0 1 960 332.032V928a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V332.032a32 32 0 0 1 7.936-21.12L278.4 75.008A32 32 0 0 1 302.528 64z"
              ></path>
              <path fill="currentColor" d="M64 320h896v64H64z"></path>
              <path
                fill="currentColor"
                d="M448 327.872V640h128V327.872L526.08 128h-28.16L448 327.872zM448 64h128l64 256v352a32 32 0 0 1-32 32H416a32 32 0 0 1-32-32V320l64-256z"
              ></path></svg
          ></el-icon>
          <span>权限管理</span>
        </template>
        <el-menu-item index="2-1" @click="goRoleList">
          <el-icon><icon-menu /></el-icon>
          角色列表
        </el-menu-item>
        <el-menu-item index="2-2" @click="goLimitsList">
          <el-icon><icon-menu /></el-icon>
          权限列表
        </el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="3">
        <template #title>
          <el-icon
            ><svg
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              data-v-ea893728=""
            >
              <path
                fill="currentColor"
                d="M128 384h768v-64a64 64 0 0 0-64-64H192a64 64 0 0 0-64 64v64zm0 64v320a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V448H128zm64-256h640a128 128 0 0 1 128 128v448a128 128 0 0 1-128 128H192A128 128 0 0 1 64 768V320a128 128 0 0 1 128-128z"
              ></path>
              <path
                fill="currentColor"
                d="M384 128v64h256v-64H384zm0-64h256a64 64 0 0 1 64 64v64a64 64 0 0 1-64 64H384a64 64 0 0 1-64-64v-64a64 64 0 0 1 64-64z"
              ></path></svg
          ></el-icon>
          <span>商品管理</span>
        </template>
        <el-menu-item index="3-1" @click="goShopList">
          <el-icon><icon-menu /></el-icon>
          商品列表
        </el-menu-item>
        <el-menu-item index="3-2" @click="goClassifyParameter">
          <el-icon><icon-menu /></el-icon>
          分类参数
        </el-menu-item>
        <el-menu-item index="3-3" @click="goShopClassify">
          <el-icon><icon-menu /></el-icon>
          商品分类
        </el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="4">
        <template #title>
          <el-icon
            ><svg
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              data-v-ea893728=""
            >
              <path
                fill="currentColor"
                d="M192 128v768h640V128H192zm-32-64h704a32 32 0 0 1 32 32v832a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm160 448h384v64H320v-64zm0-192h192v64H320v-64zm0 384h384v64H320v-64z"
              ></path></svg
          ></el-icon>
          <span>订单管理</span>
        </template>
        <el-menu-item index="4-1">
          <el-icon><icon-menu /></el-icon>
          订单列表
        </el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="5">
        <template #title>
          <el-icon
            ><svg
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              data-v-ea893728=""
            >
              <path
                fill="currentColor"
                d="m665.216 768 110.848 192h-73.856L591.36 768H433.024L322.176 960H248.32l110.848-192H160a32 32 0 0 1-32-32V192H64a32 32 0 0 1 0-64h896a32 32 0 1 1 0 64h-64v544a32 32 0 0 1-32 32H665.216zM832 192H192v512h640V192zM352 448a32 32 0 0 1 32 32v64a32 32 0 0 1-64 0v-64a32 32 0 0 1 32-32zm160-64a32 32 0 0 1 32 32v128a32 32 0 0 1-64 0V416a32 32 0 0 1 32-32zm160-64a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V352a32 32 0 0 1 32-32z"
              ></path></svg
          ></el-icon>
          <span>数据统计</span>
        </template>
        <el-menu-item index="5-1" @click="goDataList">
          <el-icon><icon-menu /></el-icon>
          数据报表
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import axios from "axios";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import { ref, reactive, onMounted, createApp } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();

// 组件
let isCollapse = ref(false);
// 是否变窄
let isNarrowDown = ref(false);

// 点击变窄
function narrowDown() {
  isCollapse.value = !isCollapse.value;
  isNarrowDown.value = !isNarrowDown.value;
}

// 首页
function goHome() {
  router.push({
    name: "MyCeHome",
  });
}
// 用户列表
function goUserList() {
  router.push({
    name: "UserList",
  });
}
// 角色列表
function goRoleList() {
  router.push({
    name: "RoleList",
  });
}
// 权限列表
function goLimitsList() {
  router.push({
    name: "LimitsList",
  });
}
// 商品列表
function goShopList() {
  router.push({
    name: "ShopList",
  });
}
// 分类参数
function goClassifyParameter() {
  router.push({
    name: "ClassifyParameter",
  });
}
// 商品分类
function goShopClassify() {
  router.push({
    name: "ShopClassify",
  });
}

// 数据报表
function goDataList() {
  router.push({
    name: "dataList",
  });
}
</script>

<style scoped>
/* 代替块 */
.replace-div {
  width: 200px;
  height: 100%;
  background-color: red;
  transition: all 0.55s;
}
/* 是否变窄 */
.active {
  width: 64px !important;
}
/* 首页 */
.home-div {
  width: 200px;
  height: 48px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 侧边栏 */
.sid-div {
  width: 200px;
  height: 100%;
  margin-top: 50px;
  background-color: rgb(31, 35, 42);
  position: fixed;
  top: 0;
  left: 0;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 99;
}
.sid-div >>> ul {
  background-color: rgb(28, 32, 39);
  transition: all 0.2s;
  border: 0px;
}
.sid-div >>> .el-sub-menu__title {
  color: white;
}
.sid-div >>> .el-sub-menu__title:hover {
  background-color: rgb(38, 44, 54);
}
.el-menu-item {
  color: white;
}
.sid-div >>> .el-menu-item:hover {
  background-color: rgb(38, 44, 54);
}
</style>